<template>
  <div>
    <div><center><h1>流程节点创建</h1></center></div>
    <div>
        请选择节点所属流程：<el-select v-model="process_id" placeholder="请选择流程">
                      <el-option
                      v-for="item in lst1"
                      :key="item.id"
                      :label="item.process"
                      :value="item.id">
                      </el-option>
                  </el-select>   
    </div>
    <div>
        <span v-for="i in size" :key="i">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="节点名：">
          <el-row :gutter="10">
            <el-col :span="15"
              ><el-input v-model="process_node[i]"></el-input
            ></el-col>
            <el-col :span="2"><el-button @click="size_up">+</el-button></el-col>
            <el-col :span="2"
              ><el-button @click="size_down">-</el-button></el-col
            >
          </el-row>
        </el-form-item>
      </el-form>
    </span>
    </div>
    <div><center><el-button @click="create">确认创建</el-button></center></div>
  </div>
</template>

<script>
export default {
data(){
    return{
        lst1:[],
        size:1,
        process_id:'',
        process_node:{}
    }
},
mounted(){
    this.getPro()
},
methods:{
    getPro(){
        this.$axios.get('process/api/v1/process/')
        .then(res=>{
            console.log(res)
            if (res.data.code == 200){
                this.lst1 = res.data.data
            }
        })
    },
    size_up() {
      this.size += 1;
    },
    size_down() {
      var aa = "";
      if (this.size > 1) {
        aa = this.size;
        console.log(aa);
        this.process_node[aa] = "";
        this.size -= 1;
      }
    },
    create(){
        this.$axios.post('process/api/v1/point/',{
            process_id:this.process_id,
            point:this.process_node
        })
        .then(res=>{
            console.log(res)
            if (res.data.code == 200){
                alert(res.data.msg)
                
            }
        })
    }
      
    }
}

</script>

<style>

</style>